<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <table cellspacing="0" cellpadding="0" class="detailTable">
        <tbody>
          <tr>
            <td class="title">项目名称</td>
            <td class="content">{{ personalInfo.projectName || '--' }}</td>
            <td class="title">责任主体社会信用代码</td>
            <td class="content">{{ personalInfo.uscc || '--' }}</td>
          </tr>
          <tr>
            <td class="title">监管区域</td>
            <td class="content">{{ personalInfo.areaName || '--' }}</td>
            <td class="title">责任主体企业名称</td>
            <td class="content">{{ personalInfo.companyName || '--' }}</td>
          </tr>
          <tr>
            <td class="title">行业</td>
            <td class="content">{{ personalInfo.industryName }}</td>
            <td class="title">奖惩情况</td>
            <td class="content general" v-if="personalInfo.status == 'REWARD'">
              {{ personalInfo.statusDesc || '--' }}
            </td>
            <td
              class="content serious"
              v-else-if="personalInfo.status == 'PUNISH'"
            >
              {{ personalInfo.statusDesc || '--' }}
            </td>
          </tr>
          <tr>
            <td class="title">奖惩人姓名</td>
            <td class="content">{{ personalInfo.employeeName || '--' }}</td>
            <td class="title">奖惩人身份证号</td>
            <td class="content">{{ personalInfo.idcard || '--' }}</td>
            <!-- <td class="title">奖惩人班组</td>
                        <td>{{personalInfo.groupName || '--'}}</td> -->
          </tr>
          <tr>
            <td class="title">奖惩人班组</td>
            <td colspan="3">{{ personalInfo.groupName || '--' }}</td>
          </tr>
          <tr>
            <td class="title">奖惩时间</td>
            <td class="content">{{ personalInfo.startDate || '--' }}</td>
            <td class="title">奖惩时间截止至</td>
            <td class="content">{{ personalInfo.endDate || '--' }}</td>
          </tr>
          <tr>
            <td class="title">奖惩原因</td>
            <td colspan="3">{{ personalInfo.reason || '--' }}</td>
          </tr>
          <tr>
            <td class="title">奖惩资料</td>
            <td colspan="3" v-if="personalInfo.fileList.length > 0">
              <el-link type="primary" @click="View">查看附件</el-link>
              <contractEnclosureDialog
                v-if="uploadContract"
                dialogTitle="奖惩资料附件"
                :tableData="personalInfo.fileList"
                @closeDialog="hiddenDialog"
              >
              </contractEnclosureDialog>
            </td>
            <td colspan="3" v-else>--</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'personalRewardAndPunishDetail',
  data() {
    return {
      titleText: '个人奖惩详情',
      back: true,
      uploadContract: false,
      personalInfo: {
        fileList: [],
      },
      id: '', //列表传过来的主键id
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetail()
  },
  methods: {
    // 查看
    View() {
      this.uploadContract = true
      this.uploadList()
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    getDetail(id) {
      this.axios({
        method: 'get',
        url: 'api-r/reward/expand/detail?id=' + this.id,
      })
        .then((response) => {
          this.personalInfo = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    goBack() {
      this.$router.push('/home/events/rewardAndPunish')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/events/rewardAndPunish',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    top: 198px;
    color: #333;
    font-size: 14px;
    padding: 24px;
    table {
      // width: 100%;
      // border-top: 1px solid #d5dfe8;
      // border-left: 1px solid #d5dfe8;
      // td {
      //     padding: 16px 18px;
      //     border-bottom: 1px solid #d5dfe8;
      //     border-right: 1px solid #d5dfe8;
      // }
      // .title {
      //     width: 177px;
      //     background-color: #f5f7fc;
      //     font-weight: 500;
      //     text-align: right;
      // }
      // .content {
      //     width: 100%;
      // }
      .general {
        color: #6dd400;
      }
      .serious {
        color: #e02020;
      }
      .aLink {
        color: #00a0e9;
      }
    }
  }
}
</style>
